<template>
	<view class="content">
		<view class="top-box">
			<Nav bgColor="#f8db61">
				<view class="title">
					<view class="title-left">
						<view class="title-txt">默认账本</view>
						<view class="title-icon">
							<up-icon name="arrow-down-fill" color="#292723" size="13"></up-icon>
						</view>
					</view>
					<!-- <view class="search-box">
						<view class="search">
							<input type="text" placeholder="搜索" />
						</view>
						<image src="/static/icon/search.png" mode="aspectFill"></image>
					</view> -->
				</view>
			</Nav>
			<view class="top-block">
				<view class="top-block-title">总重量(克)</view>
				<view class="top-block-g">251.03</view>
				<view class="top-block-item-box">
					<view class="top-block-item">
						<view class="top-block-item-title">平均克价(元)</view>
						<view class="top-block-item-number">542.03</view>
					</view>
					<view class="top-block-item">
						<view class="top-block-item-title">平均克价(元)</view>
						<view class="top-block-item-number">542.03</view>
					</view>
					<view class="top-block-item">
						<view class="top-block-item-title">平均克价(元)</view>
						<view class="top-block-item-number red">542.03</view>
					</view>
					<view class="top-block-item">
						<view class="top-block-item-title">平均克价(元)</view>
						<view class="top-block-item-number red">542.03</view>
					</view>
				</view>
				<view class="option-box">
					<view :class="{ active: current == index }" class="option-item" @click="clickOption(item, index)"
						v-for="(item, index) in indexOption" :key="index">
						{{ item.name }}
					</view>
				</view>
				<view class="more-set">
					<view class="more-set-item">
						<image src="/static/icon/setting.png" mode="aspectFill"></image>
					</view>
					<view class="more-set-item">
						<image src="/static/icon/batch.png" mode="aspectFill"></image>
					</view>
				</view>

			</view>
			<view class="content-title p2432">
				<view class="content-title-left">
					<view class="content-title-left-item" @click="screenShow = true">
						<view class="content-title-left-item-txt">筛选</view>
						<view class="content-title-left-item-icon">
							<image src="/static/icon/down.png" mode=""></image>
						</view>
					</view>
					<view class="content-title-left-item">
						<view class="content-title-left-item-txt">排序</view>
						<view class="content-title-left-item-icon">
							<image src="/static/icon/down.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="content-title-right">*左滑可增卖、迁移或删除</view>
			</view>
		</view>
		<view class="content" :style="{ marginTop: topHeight + 'px' }">

			<view class="list p2432">
				<up-swipe-action>
					<up-swipe-action-item :options="options" v-for="(item, index) in 10" :key="index">
						<view class="list-item">
							<view class="item-cover">
								<view class="cover">
									<image src="/static/logo.png" mode="aspectFill"></image>
								</view>
								<view class="tip-con">526.13元/克</view>
							</view>
							<view class="desc">
								<view class="desc-title">
									<view class="desc-title-left">古法三圈手串·pyht</view>
									<view class="desc-title-right" :class="{ red: index % 2 == 0 }">收益：-508.69</view>
								</view>
								<view class="desc-bottom">
									<view class="desc-icon">
										<image src="/static/icon/ingot.png" mode="aspectFill"></image>
									</view>
									<view class="desc-one">40.31克</view>
									<view class="desc-two">22222.2元</view>
									<view class="desc-three">+工费952.12元</view>
									<view class="desc-four">2024.08.20</view>
								</view>
							</view>
						</view>
					</up-swipe-action-item>
				</up-swipe-action>
			</view>
		</view>
	</view>

	<!-- 筛选 -->
	<up-popup :show="screenShow" mode="bottom" @close="screenShow = false" @open="screenShow = true" closeable>
		<view class="screen-pop-main">
			<view class="screen-title">选择排序项</view>
			<view class="sort" style="margin-bottom: 40rpx">
				<view class="sort-title">排序方式</view>
				<view class="sort-box">
					<view class="sort-item" :class="{ 'sort-active': sortOneCurrent == index }"
						@click="clickSort(1, item, index)" v-for="(item, index) in sortListOne" :key="index">
						{{ item.name }}
					</view>
				</view>
			</view>
			<view class="sort">
				<view class="sort-title">排序方式</view>
				<view class="sort-box">
					<view :class="{ 'sort-active': sortTwoCurrent == index }" class="sort-item"
						@click="clickSort(2, item, index)" v-for="(item, index) in sortListTwo" :key="index">
						{{ item.name }}
					</view>
				</view>
			</view>
			<view class="btn-box">
				<view class="btn-item cancel" @click="screenShow = false">取消</view>
				<view class="btn-item confirm" @click="screenShow = false">确定</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';
	import {
		getElementHeight
	} from '@/utils/util.js';

	// 筛选弹窗
	const screenShow = ref(false);

	// 排序方式一
	const sortListOne = ref([{
			name: '降序',
			type: 1
		},
		{
			name: '升序',
			type: 2
		}
	]);

	// 排序方式二
	const sortListTwo = ref([{
			name: '购买日期',
			type: 1
		},
		{
			name: '创建时间',
			type: 2
		},
		{
			name: '平均克价',
			type: 3
		},
		{
			name: '购买金额',
			type: 4
		},
		{
			name: '预估收益',
			type: 5
		},
		{
			name: '购买渠道',
			type: 6
		}
	]);

	// 点击排序
	const sortOneCurrent = ref(0);
	const sortTwoCurrent = ref(0);
	const clickSort = (type, item, index) => {
		type == 1 ? (sortOneCurrent.value = index) : (sortTwoCurrent.value = index);
	};

	// 列表操作菜单
	const options = reactive([{
			text: '卖出',
			style: {
				backgroundColor: '#5ec888'
			}
		},
		{
			text: '赠送',
			style: {
				backgroundColor: '#534faf'
			}
		},
		{
			text: '迁移',
			style: {
				backgroundColor: '#4d7ba2'
			}
		},
		{
			text: '删除',
			style: {
				backgroundColor: '#e55052'
			}
		}
	]);

	// 顶部option
	const indexOption = ref([{
			name: '攒金日历',
			type: 1
		},
		{
			name: '添加黄金',
			type: 2
		},
		{
			name: '增卖记录',
			type: 3
		}
	]);

	// 顶部option选择
	const current = ref(0);
	const clickOption = (item, index) => {
		current.value = index;
	};

	// 获取顶部高度
	const topHeight = ref(0);
	onMounted(async () => {
		topHeight.value = await getElementHeight('.top-box');
	});
</script>

<style lang="scss" scoped>
	.content-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding-top: 20rpx;

		.content-title-left {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.content-title-left-item {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 120rpx;
				height: 48rpx;
				background: #fafafa;
				border-radius: 24rpx;
				margin-left: 10rpx;

				.content-title-left-item-txt {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 20rpx;
					color: #292522;
				}

				.content-title-left-item-icon {
					image {
						width: 28rpx;
						height: 22rpx;
					}
				}
			}
		}

		.content-title-right {
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 400;
			font-size: 20rpx;
			color: #292522;
		}
	}

	.red {
		color: #ff4300 !important;
	}

	.active {
		color: #ffffff !important;
		background-color: #282522 !important;
	}

	.sort-active {
		color: #292522 !important;
		background-color: #f8db61 !important;
	}

	.p2432 {
		padding: 24rpx 32rpx 24rpx 32rpx;
	}

	:deep(.u-swipe-action-item) {
		margin-bottom: 16rpx;
		border-radius: 20rpx;
	}

	.top-box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.title {
		display: flex;
		align-items: center;
		padding: 0 32rpx;

		.title-left {
			display: flex;
			align-items: center;
			margin-right: 202rpx;

			.title-txt {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 36rpx;
				color: #000000;
			}
		}

		.search-box {
			width: 120rpx;
			height: 48rpx;
			background: #b89e31;
			border-radius: 24rpx;
			position: relative;
			box-sizing: border-box;

			.search {
				border-radius: 24rpx;
				width: 120rpx;
				height: 48rpx;

				input {
					box-sizing: border-box;
					width: 120rpx;
					height: 48rpx;
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 20rpx;
					color: #ffffff;
					padding-left: 45rpx;
					padding-right: 5rpx;
				}
			}

			image {
				position: absolute;
				top: 8rpx;
				left: 10rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}
	}



	.top-block {
		background-color: #f8db61;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-bottom: 32rpx;
		position: relative;


		.more-set {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 62rpx;
			right: 66rpx;

			.more-set-item {
				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.top-block-title {
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 500;
			font-size: 24rpx;
			color: #292522;
		}

		.top-block-g {
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 500;
			font-size: 72rpx;
			color: #292522;
			margin: 10rpx 0;
			font-weight: 900;
		}

		.top-block-item-box {
			margin-bottom: 32rpx;
			display: flex;
			align-items: center;

			.top-block-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin: 0 26rpx;

				.top-block-item-title {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 20rpx;
					color: #726f6d;
					margin-bottom: 5rpx;
				}

				.top-block-item-number {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 500;
					font-size: 28rpx;
					color: #292522;
				}
			}
		}

		.option-box {
			display: flex;
			align-items: center;
			justify-content: center;

			.option-item {
				margin: 0 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 144rpx;
				height: 56rpx;
				border-radius: 40rpx;
				border: 2rpx solid #292522;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 24rpx;
				color: #292522;
			}
		}
	}

	.content {

		.list {
			.list-item:last-child {
				margin-bottom: 0;
			}

			.list-item {
				margin-bottom: 16rpx;
				display: flex;
				align-items: center;
				background: #ffffff;
				border-radius: 20rpx;

				.item-cover {
					margin-right: 16rpx;
					position: relative;

					.cover {
						image {
							width: 160rpx;
							height: 160rpx;
							border-radius: 20rpx 0rpx 0rpx 20rpx;
						}
					}

					.tip-con {
						position: absolute;
						top: 0;
						left: 0;
						width: 140rpx;
						height: 28rpx;
						background: #FEDA44;
						border-radius: 20rpx 0rpx 20rpx 0rpx;
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						font-size: 20rpx;
						color: #292522;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.desc {
					.desc-title {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 26rpx;

						.desc-title-left {
							font-family: Source Han Sans, Source Han Sans;
							font-weight: 500;
							font-size: 28rpx;
							color: #292522;
						}

						.desc-title-right {
							font-family: Source Han Sans, Source Han Sans;
							font-weight: 400;
							font-size: 28rpx;
							color: #3bbb8b;
						}
					}

					.desc-bottom {
						margin-top: 26rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.desc-icon {
							image {
								width: 30rpx;
								height: 30rpx;
							}
						}

						.desc-one,
						.desc-two {
							font-family: Source Han Sans, Source Han Sans;
							font-weight: 400;
							font-size: 24rpx;
							color: #292522;
						}

						.desc-two {
							margin: 0 10rpx;
						}

						.desc-three {
							margin: 0 10rpx;
						}

						.desc-three,
						.desc-four {
							font-family: Source Han Sans, Source Han Sans;
							font-weight: 400;
							font-size: 20rpx;
							color: #292522;
						}

						.desc-four {
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}

	.screen-pop-main {
		padding: 0 32rpx;

		.screen-title {
			margin: 32rpx 0 40rpx 0;
			display: flex;
			justify-content: center;
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 400;
			font-size: 32rpx;
			color: #292522;
		}

		.sort {
			.sort-title {
				margin-bottom: 16rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				font-size: 24rpx;
				color: #a4a19c;
			}

			.sort-box {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.sort-item {
					margin: 6rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 216rpx;
					height: 80rpx;
					background: #f5f5f5;
					border-radius: 20rpx;
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 28rpx;
					color: #292522;
				}
			}
		}

		.btn-box {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 71rpx;
			margin-top: 146rpx;
			margin-bottom: 40rpx;

			.btn-item {
				width: 256rpx;
				height: 100rpx;
				background: #f5f5f5;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				font-size: 32rpx;
				color: #292522;
			}

			.cancel {
				background-color: #f5f5f5;
				margin-right: 19rpx;
			}

			.confirm {
				background-color: #f8db61;
				margin-left: 19rpx;
			}
		}
	}
</style>